<template>
  <div id="app" style="width: 100%">
    <div class="page-header">
      <div class="page-title">控制台</div>
      <div class="page-header-btn">
        <el-button icon="InfoFilled" style="margin-right: 1rem" type="primary" @click="showInfo">平台信息</el-button>
      </div>
    </div>
    <el-row style="width: 100%">
      <el-col :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xl="{ span: 8 }" :xs="{ span: 24 }">
        <div id="ThreadsLoad" class="control-cell">
          <div style="width: 100%; height: 100%">
            <consoleCPU ref="consoleCPU"></consoleCPU>
          </div>
        </div>
      </el-col>
      <el-col :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xl="{ span: 8 }" :xs="{ span: 24 }">
        <div id="WorkThreadsLoad" class="control-cell">
          <div style="width: 100%; height: 100%">
            <consoleResource ref="consoleResource"></consoleResource>
          </div>
        </div>
      </el-col>
      <el-col :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xl="{ span: 8 }" :xs="{ span: 24 }">
        <div id="WorkThreadsLoad" class="control-cell">
          <div style="width: 100%; height: 100%">
            <consoleNet ref="consoleNet"></consoleNet>
          </div>
        </div>
      </el-col>
      <el-col :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xl="{ span: 8 }" :xs="{ span: 24 }">
        <div id="WorkThreadsLoad" class="control-cell">
          <div style="width: 100%; height: 100%">
            <consoleMem ref="consoleMem"></consoleMem>
          </div>
        </div>
      </el-col>
      <el-col :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xl="{ span: 8 }" :xs="{ span: 24 }">
        <div id="WorkThreadsLoad" class="control-cell">
          <div style="width: 100%; height: 100%">
            <consoleNodeLoad ref="consoleNodeLoad"></consoleNodeLoad>
          </div>
        </div>
      </el-col>
      <el-col :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xl="{ span: 8 }" :xs="{ span: 24 }">
        <div id="WorkThreadsLoad" class="control-cell">
          <div style="width: 100%; height: 100%">
            <consoleDisk ref="consoleDisk"></consoleDisk>
          </div>
        </div>
      </el-col>
    </el-row>
    <configInfo ref="configInfo"></configInfo>
  </div>
</template>

<script>
import consoleCPU from "@/views/console/ConsoleCPU.vue";
import consoleMem from "@/views/console/ConsoleMEM.vue";
import configInfo from "@/views/console/configInfo.vue";
import {
  getMediaServerConfigInfo,
  getMediaServerLoad,
  getMediaServerResource,
  getSystemInfo
} from "@/api/video_monitor/console";
import consoleResource from "@/views/console/ConsoleResource";
import consoleNet from "@/views/console/ConsoleNet";
import consoleNodeLoad from "@/views/console/ConsoleNodeLoad";
import consoleDisk from "@/views/console/ConsoleDisk";

export default {
  name: "app",
  components: {
    consoleCPU,
    consoleMem,
    consoleNet,
    consoleNodeLoad,
    consoleDisk,
    consoleResource,
    configInfo
  },
  data() {
    return {
      timer: null
    };
  },
  created() {
    this.getSystemInfo();
    this.getLoad();
    this.getResourceInfo();
    this.loopForSystemInfo();
  },
  unmounted() {
    window.clearTimeout(this.timer);
  },
  methods: {
    loopForSystemInfo: function() {
      if (this.timer != null) {
        window.clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        if (this.$route.path === "/index") {
          this.getSystemInfo();
          this.getLoad();
          this.loopForSystemInfo();
          this.getResourceInfo();
        }
      }, 4000);
    },
    getSystemInfo: async function() {
      let res = await getSystemInfo();
      this.setDataIfNotNull(this.$refs.consoleCPU, res.data.cpu);
      this.setDataIfNotNull(this.$refs.consoleMem, res.data.mem);
      if (this.$refs.consoleNet != null) {
        this.$refs.consoleNet.setData(
          res.data.net,
          res.data.netTotal
        );
      }
      this.setDataIfNotNull(this.$refs.consoleDisk, res.data.disk);
    },
    getLoad: async function() {
      let res = await getMediaServerLoad();
      this.setDataIfNotNull(this.$refs.consoleNodeLoad, res.data);
    },
    getResourceInfo: async function() {
      let res = await getMediaServerResource();
      this.setDataIfNotNull(this.$refs.consoleResource, res.data);
    },
    showInfo: async function() {
      let res = await getMediaServerConfigInfo();
      this.$refs.configInfo.openDialog(res.data);
    },
    setDataIfNotNull(ref, data) {
      if (ref != null) {
        ref.setData(data);
      }
    }
  }
};
</script>

<style>
#app {
  height: 100%;
}

.control-cell {
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 10px;
  height: 360px;
  background-color: #e9eef3;
}

.page-header {
  background-color: #e9eef3;
  margin-bottom: 1rem;
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header-btn {
  text-align: right;
}

.page-title {
  font-weight: bold;
  text-align: left;
}
</style>
